<template>
	<view class="page custom-page">
		<custom-head gradient back title="礼品管理">
			<!-- <view class="tool" slot="right">
        <i class="iconfont icon-fenlei fenlei" @click="enterPage"></i>
      </view> -->
		</custom-head>

		<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" swiperWidth="750" @change="tabsChange"></u-tabs-swiper>

		<view class="gift">
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="i in list">
					<scroll-view class="bao_scroll" scroll-y style="height: 100%;width: 100%;">

						<view class="gift_box">
							<view class="gift_box_item flex a-center jlr" v-for="item in giftList"  @click="handleJump(item.id)">
								<view class="flex a-center">
									<view class="image"> 
										<image :src="item.avatar" mode="widthFix"/>
									</view>
									<view class="info">
										<view class="title flex a-center">
											<view class="label">{{ item.name }}</view>
										</view>
										<p class="red_color">
											<text>兑换积分:</text>
											<text class="text_left">{{ item.price_score }}</text>
										</p>
									</view>
								</view>
								<view class="date">
									库存: {{ item.stock }} 件 <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
								</view>
							</view>
						</view>
						<u-button type="primary" class="button" @click="handleGift">新增</u-button>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>

		<u-modal :show-title="false" :show-cancel-button="true" v-model="showModal" @confirm="confirm">
			<view class="modal_content">
				<u-tabs :list="tabsList" :is-scroll="false" :current="tabCurrent" @change="changeModal"></u-tabs>

				<u-form :model="tabForm" ref="uForm">
					<view v-if="tabCurrent === 0">
						<u-form-item label="添加数量" :label-style="{'white-space': 'nowrap','font-size': '30rpx', 'font-weight': 'bold'}" label-width="140">
							<u-input type="number" v-model="tabForm.addCount" input-align="center"  /> 套
						</u-form-item>

						<u-form-item label="添加理由" :border-bottom="false" :label-style="{'white-space': 'nowrap','font-size': '30rpx', 'font-weight': 'bold'}" label-width="140">
							<u-input v-model="tabForm.addContent" input-align="center" placeholder="请输入添加库存的原因" />
						</u-form-item>
					</view>
					<view v-if="tabCurrent === 1">
						<u-form-item label="减少数量" :label-style="{'white-space': 'nowrap','font-size': '30rpx', 'font-weight': 'bold'}" label-width="140">
							<u-input type="number" v-model="tabForm.minusCount" input-align="center" /> 套
						</u-form-item>

						<u-form-item label="减少理由" :border-bottom="false" :label-style="{'white-space': 'nowrap','font-size': '30rpx', 'font-weight': 'bold'}" label-width="140">
							<u-input v-model="tabForm.minusContent" input-align="center" placeholder="请输入减少库存的原因"  />
						</u-form-item>
					</view>
				</u-form>
			</view>
		</u-modal>

		<u-action-sheet cancelText="取消" :list="sheetlist" v-model="show" @click="enterPage"></u-action-sheet>

	</view>
</template>

<script>
import { getPresent } from '../../api/modules/present';
import { addPresent_history } from '../../api/modules/present_history';

export default {
	data() {
		return {
			static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			show:false,
			sheetlist:[{text:'发放'},{text:'编辑'},{text:'库存管理'},{text:'库存记录'}],
			list: [{
				name: '1-100'
			}, {
				name: '101-1000'
			}, {
				name: '1001-5000'
			},{
		name: '5001以上'
	}
			],
			current: 0,
			swiperCurrent: 0,
			giftList: [], // 礼品管理页面数据
			totalGiftList: [], // 总数据页面

			tabCurrent: 0, // 当前 tab 的位置
			showModal: false, // 弹出框的显示和隐藏
			tabsList: [ // 弹出框tabs
				{name: '添加库存'},
				{name: '减少库存'},
			],
			tabForm: {
				addCount: null,
				addContent: null,
				minusCount: null,
				minusContent: null,
			},
			showId: '', // 弹出来的id
			inventoryIndex: 0, // 库存管理index
		};
	},
	onShow() {
		this._getPresent({ page_no: 1, page_size: 10000 });
	},
	mounted() {
		
	},
	methods: {
		handleGift() {
			// console.log('新增，添加礼品')
			uni.navigateTo({
				url: '/pages/home/addGift'
			})
		},
		handleJump(id) {
			this.show = true;
			this.showId = id
		},
		enterPage(e){
			console.log('作用, e', e)

			if (e === 0 ) {
				uni.navigateTo({
					url:`/pages/student/giftSend?id=${this.showId}`
				})
			} else if (e === 1) {
				uni.navigateTo({
					url:`/pages/home/addGift?id=${this.showId}`
				})
			} else if ( e === 2 ) {
				(e === 2) && (this.showModal = true)
			} else if ( e === 3 ) {
				uni.navigateTo({
					url:'/pages/home/homeStockManage'
				})
			} 
		},

		confirm() {
			console.log('input-', this.tabForm, this.inventoryIndex)
			const { addCount, addContent, minusCount, minusContent } = this.tabForm || {};
			// this.tabForm = {
			// 	addCount: null,
			// 	addContent: null,
			// 	minusCount: null,
			// 	minusContent: null,
			// }
			let params = {
				0: {
					cnt: addCount,
					desc: addContent,
					sid: this.glbId
				},
				1: {
					cnt: '-'+minusCount,
					desc: minusContent,
					sid: this.glbId
				},
			}

			this._addPresent_history(this.showId, params[this.inventoryIndex])
		},

		changeModal(index) { // 弹出框的 tab
			console.log('index', index)
			this.inventoryIndex = index
			if (index === 0) {
				this.tabForm = {
					minusCount: null,
					minusContent: null,
				}
			} else if(index === 1) {
				this.tabForm = {
					addCount: null,
					addContent: null,
				}
			}
			this.tabCurrent = index
		},
		tabsChange(index) {
			this.swiperCurrent = index;
			if ( index === 0 ) {
				this.giftList = this.totalGiftList.filter(i => i.price_score <= 100 && i.price_score >= 1);
			} else if (index === 1) {
				this.giftList = this.totalGiftList.filter(i => i.price_score <= 1000 &&  i.price_score >=101);
			} else if (index === 2) {
				this.giftList = this.totalGiftList.filter(i => i.price_score <= 5000 && i.price_score >= 1001);
			}else if (index === 3) {
				this.giftList = this.totalGiftList.filter(i => i.price_score >= 5001);
			}

		},
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},

		_addPresent_history(id, data) {
			addPresent_history(id, data).then(res => {
				const { code } = res || {}
				if (code === 201) {
					this.$u.toast('修改成功');
					this.tabForm = {
						addCount: null,
						addContent: null,
						minusCount: null,
						minusContent: null,
					}
				}
				// console.log('库存管理, res', res)
			})
		},

		_getPresent(params) {
			getPresent(params).then(res => {
				const { code, data } = res || {}
				if ( code === 200) {
					let arr = data.list.map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`})).filter(i => i.sid === this.glbId)

					this.giftList = arr.filter(i => i.price_score <= 100);
					this.totalGiftList = arr;

				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
	page{height: 100%;}

  .red_color {
    color: #F84638;

    .text_left {
	  width: 40rpx;
      margin-left: 10rpx;
	  text-overflow:ellipsis;/*省略号 */
	  white-space:nowrap;/*溢出时不换行 */
	  overflow:hidden;/*溢出时隐藏 */
    }
  }

	.modal_content {
		/* width: 90%; */
		height: 400rpx;
		padding: 53rpx 43rpx 10rpx 44rpx;
	}

  .button {
    height: 88rpx;
    margin: 134rpx 20rpx 40rpx;
    border-radius: 48rpx;
  }
	.gift{height: calc(100% - 80rpx); overflow: hidden;}
	.gift swiper,.gift swiper-item{width: 100%; height: 100%;}
	.gift_box{ padding: 0px 20rpx;}
	.gift_box_item{background-color: #fff; margin-bottom: 20rpx; border-radius: 20rpx; box-shadow: 0rpx 2rpx 8rpx 0rpx #DDDFEB; padding: 30rpx 22rpx;}
	.gift_box_item .image{width: 150rpx; height: 150rpx; border-radius: 20rpx; overflow: hidden;}
	.gift_box_item .info{padding-left: 25rpx; font-size: 28rpx; color: #303133;}
	.gift_box_item .title{margin-bottom: 10rpx;}
	.gift_box_item .info .userImage{width: 60rpx; height: 60rpx; border-radius: 50%; overflow: hidden;}
	.gift_box_item .info .label{
		font-size: 32rpx;
		margin-left: 10rpx;
		width: 200rpx;
		text-overflow:ellipsis;/*省略号 */
	    white-space:nowrap;/*溢出时不换行 */
	    overflow:hidden;/*溢出时隐藏 */
	}
	.date{font-size: 28rpx; color: #303133;}
	.gift_box_item:active{filter: brightness(80%)}

	.bao_scroll {
		/deep/.uni-scroll-view-content {
			display: flex;
			justify-content: space-between;
			flex-direction: column;

		}
	}
	
</style>